<template>
  <u-card v-if="item" padding="30rpx 30rpx" margin="20rpx 30rpx" :border="false" :show-foot="false" :show-head="false" class="item">
    
    <template #body>
      <view class="flex items-center">
        <up-avatar :src="item.avatar"></up-avatar>
        <view class="flex-1 ml-[20rpx]">
          <view>
            <text class="text-[28rpx] text-[#000]">{{item.user_name||'用户昵称'}}</text>
            <text class="text-[#ccc] text-[24rpx] ml-[14rpx]">ID:{{item.uid||'--'}}</text>
          </view>
          <view class="mt-[10rpx] text-[#999] text-[24rpx]">门店：{{item.store_name||'未绑定门店'}}</view>
        </view>
        <view class="text-[24rpx] text-right">
          <view class="text-[#888]">{{dateFormat2(item.num)}}</view>
          <view class="text-primary mt-[16rpx]">邀请人数：{{item.share_num}}</view>
        </view>
      </view>

      <view class="item-content text-[24rpx]">
        <up-row gutter="10" customStyle="flex-wrap: wrap;">
          <up-col span="5">
            <view class=" mb-[20rpx] flex items-center">
              <view class="label text-[#999]">答题状态</view>
              <view class="value">
                <text v-if="item.dati_num==0">未答题</text>
                <text v-else class="text-[red]">已答题</text>
              </view>
            </view>
          </up-col>
          <up-col span="7">
            <view class=" mb-[20rpx] flex items-center">
              <view class="label text-[#999]">活动奖励</view>
              <view v-if="item.dati_num==0" class="value">
                <text class="j">--</text>
              </view>
              <view v-else class="value">
                <text class="text-[red] money">{{item.money}}</text>
                <text class="pl-[10rpx] pr-[10rpx]">/</text>
                <text class="text-[red] integral">{{item.jifen}}</text>
              </view>
            </view>
          </up-col>
          <up-col span="5">
            <view class=" flex items-center">
              <view class="label text-[#999]">邀请人</view>
              <view class="value">{{item.from_user_name}}</view>
            </view>
          </up-col>
          <up-col span="7">
            <view class=" flex items-center">
              <view class="label text-[#999]">上报时间</view>
              <view class="value">{{item.play_start_time ? dateFormat(item.play_start_time) : '--'}}</view>
            </view>
          </up-col>
        </up-row>
      </view>
    </template>
  </u-card>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import { computed, type PropType } from 'vue';

defineProps({
  item: {
    type: Object as PropType<IAnswerRecordItem>,
  }
})

// 格式化时间
const dateFormat = computed(() => {
  return (date: number) => dayjs(date*1000).format('YYYY-MM-DD HH:mm')
})

// 格式化时间
const dateFormat2 = computed(() => {
  return (date: number) => {
    // 时分秒
    const hours = Math.floor(date / 3600);
    const minutes = hours * 60 + Math.floor((date % 3600) / 60);
    const seconds = date % 60;
    return `${minutes}分${seconds}秒`
  }
})


</script>
<style lang="scss" scoped>
.ellipse {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-content {
  border-top: 1px dashed #eee;
  padding-top: 20rpx;
  margin-top: 20rpx;
  .label {
    width: 100rpx;
    text-align: right;
    padding-right: 20rpx;
  }
  .value {
    color: #000;
  }

  .money {
    font-size: 30rpx;
    font-weight: bold;

    &::after {
      content: '元';
      font-size: 18rpx;
      font-weight: normal;
    }
  }
  .integral {
    font-size: 30rpx;
    font-weight: bold;

    &::after {
      content: '积分';
      font-size: 18rpx;
      font-weight: normal;
    }
  }
}

</style>